<template>
  <div class="membership-container">
    <div class="membership-header">
      <h2>会员中心</h2>
    </div>
    
    <!-- 会员状态卡片 -->
    <div class="membership-card" :class="{ 'vip-active': userStore.membership.status === 'active' }">
      <div class="membership-badge">
        <span class="badge-text">{{ userStore.membership.level || '普通会员' }}</span>
      </div>
      <div class="membership-info">
        <h3>{{ userStore.membership.status === 'active' ? '尊享会员特权' : '立即开通会员' }}</h3>
        <p v-if="userStore.membership.status === 'active'" class="expire-date">
          有效期至: {{ formatDate(userStore.membership.expireDate) }}
        </p>
        <p v-else class="benefits-preview">开通会员享多重好礼和专属服务</p>
      </div>
      <div class="membership-actions">
        <button v-if="userStore.membership.status !== 'active'" class="upgrade-button" @click="showUpgradeModal = true">
          立即开通
        </button>
        <button v-else class="renew-button" @click="showRenewModal = true">
          续费会员
        </button>
      </div>
    </div>
    
    <!-- 会员权益 -->
    <div class="benefits-section">
      <h3>会员权益</h3>
      <div class="benefits-grid">
        <div class="benefit-item">
          <div class="benefit-icon">💰</div>
          <div class="benefit-info">
            <h4>专属折扣</h4>
            <p>全场商品9折起</p>
          </div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🎁</div>
          <div class="benefit-info">
            <h4>生日礼包</h4>
            <p>生日当月送50元无门槛券</p>
          </div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🚚</div>
          <div class="benefit-info">
            <h4>免运费</h4>
            <p>全场商品免运费</p>
          </div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">⭐</div>
          <div class="benefit-info">
            <h4>积分加倍</h4>
            <p>购物积分1.5倍累积</p>
          </div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🎪</div>
          <div class="benefit-info">
            <h4>专属活动</h4>
            <p>会员专享活动优先参与</p>
          </div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🎈</div>
          <div class="benefit-info">
            <h4>新品优先购</h4>
            <p>新品提前7天购买</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 会员等级 -->
    <div class="membership-levels">
      <h3>会员等级体系</h3>
      <div class="levels-container">
        <div class="level-card" :class="{ 'current': userStore.membership.level === '普通会员' }">
          <div class="level-icon">🥉</div>
          <h4>普通会员</h4>
          <p>注册即可享受</p>
          <ul>
            <li>基础购物体验</li>
            <li>标准积分累积</li>
          </ul>
        </div>
        <div class="level-card" :class="{ 'current': userStore.membership.level === '银卡会员' }">
          <div class="level-icon">🥈</div>
          <h4>银卡会员</h4>
          <p>消费满1000元</p>
          <ul>
            <li>全场9.5折</li>
            <li>生日礼包</li>
            <li>积分1.2倍</li>
          </ul>
        </div>
        <div class="level-card" :class="{ 'current': userStore.membership.level === '金卡会员' }">
          <div class="level-icon">🥇</div>
          <h4>金卡会员</h4>
          <p>消费满5000元</p>
          <ul>
            <li>全场9折</li>
            <li>生日礼包+50元券</li>
            <li>积分1.5倍</li>
            <li>免运费</li>
          </ul>
        </div>
        <div class="level-card" :class="{ 'current': userStore.membership.level === '钻石会员' }">
          <div class="level-icon">💎</div>
          <h4>钻石会员</h4>
          <p>消费满20000元</p>
          <ul>
            <li>全场8.5折</li>
            <li>生日礼包+100元券</li>
            <li>积分2倍</li>
            <li>专属客服</li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 升级统计 -->
    <div class="upgrade-stats" v-if="userStore.membership.level !== '钻石会员'">
      <h3>升级进度</h3>
      <div class="stats-content">
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: upgradeProgress + '%' }"></div>
        </div>
        <div class="progress-info">
          <span>当前消费: ¥{{ userStore.membership.totalSpend }}</span>
          <span>距离下一等级还需: ¥{{ nextLevelAmount }}</span>
        </div>
      </div>
    </div>
    
    <!-- 开通会员模态框 -->
    <div v-if="showUpgradeModal" class="modal-overlay" @click="showUpgradeModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>开通会员</h3>
          <button class="close-button" @click="showUpgradeModal = false">×</button>
        </div>
        <div class="modal-body">
          <div class="membership-plans">
            <div class="plan-card" :class="{ 'selected': selectedPlan === 'monthly' }" @click="selectedPlan = 'monthly'">
              <h4>月度会员</h4>
              <p class="plan-price">¥19.9/月</p>
              <button class="select-plan" :disabled="selectedPlan === 'monthly'">
                {{ selectedPlan === 'monthly' ? '已选择' : '选择' }}
              </button>
            </div>
            <div class="plan-card" :class="{ 'selected': selectedPlan === 'yearly' }" @click="selectedPlan = 'yearly'">
              <h4>年度会员</h4>
              <p class="plan-price">¥199/年 <span class="save-tag">省20%</span></p>
              <button class="select-plan" :disabled="selectedPlan === 'yearly'">
                {{ selectedPlan === 'yearly' ? '已选择' : '选择' }}
              </button>
            </div>
            <div class="plan-card best-value" :class="{ 'selected': selectedPlan === 'lifetime' }" @click="selectedPlan = 'lifetime'">
              <div class="best-value-tag">最划算</div>
              <h4>终身会员</h4>
              <p class="plan-price">¥999/永久</p>
              <button class="select-plan" :disabled="selectedPlan === 'lifetime'">
                {{ selectedPlan === 'lifetime' ? '已选择' : '选择' }}
              </button>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-button" @click="showUpgradeModal = false">取消</button>
          <button class="confirm-button" @click="upgradeMembership" :disabled="isProcessing">
            {{ isProcessing ? '处理中...' : '确认开通' }}
          </button>
        </div>
      </div>
    </div>
    
    <!-- 续费模态框 -->
    <div v-if="showRenewModal" class="modal-overlay" @click="showRenewModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>续费会员</h3>
          <button class="close-button" @click="showRenewModal = false">×</button>
        </div>
        <div class="modal-body">
          <div class="current-status">
            <p>当前会员有效期至: {{ formatDate(userStore.membership.expireDate) }}</p>
          </div>
          <div class="membership-plans">
            <div class="plan-card" :class="{ 'selected': selectedRenewPlan === 'monthly' }" @click="selectedRenewPlan = 'monthly'">
              <h4>续费1个月</h4>
              <p class="plan-price">¥19.9</p>
              <button class="select-plan" :disabled="selectedRenewPlan === 'monthly'">
                {{ selectedRenewPlan === 'monthly' ? '已选择' : '选择' }}
              </button>
            </div>
            <div class="plan-card" :class="{ 'selected': selectedRenewPlan === 'yearly' }" @click="selectedRenewPlan = 'yearly'">
              <h4>续费1年</h4>
              <p class="plan-price">¥199 <span class="save-tag">省20%</span></p>
              <button class="select-plan" :disabled="selectedRenewPlan === 'yearly'">
                {{ selectedRenewPlan === 'yearly' ? '已选择' : '选择' }}
              </button>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-button" @click="showRenewModal = false">取消</button>
          <button class="confirm-button" @click="renewMembership" :disabled="isProcessing">
            {{ isProcessing ? '处理中...' : '确认续费' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '../stores/user'

const userStore = useUserStore()

// 模态框状态
const showUpgradeModal = ref(false)
const showRenewModal = ref(false)
const isProcessing = ref(false)
const selectedPlan = ref('monthly')
const selectedRenewPlan = ref('monthly')

// 计算升级进度
const upgradeProgress = computed(() => {
  const currentLevel = userStore.membership.level
  const totalSpend = userStore.membership.totalSpend
  
  switch (currentLevel) {
    case '普通会员':
      return Math.min((totalSpend / 1000) * 100, 100)
    case '银卡会员':
      return Math.min(((totalSpend - 1000) / 4000) * 100, 100)
    case '金卡会员':
      return Math.min(((totalSpend - 5000) / 15000) * 100, 100)
    default:
      return 100
  }
})

// 计算距离下一等级还需消费金额
const nextLevelAmount = computed(() => {
  const currentLevel = userStore.membership.level
  const totalSpend = userStore.membership.totalSpend
  
  switch (currentLevel) {
    case '普通会员':
      return Math.max(1000 - totalSpend, 0)
    case '银卡会员':
      return Math.max(5000 - totalSpend, 0)
    case '金卡会员':
      return Math.max(20000 - totalSpend, 0)
    default:
      return 0
  }
})

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 升级会员
const upgradeMembership = async () => {
  isProcessing.value = true
  try {
    await userStore.upgradeMembership(selectedPlan.value)
    showUpgradeModal.value = false
    alert('会员开通成功！')
  } catch (error) {
    alert('开通失败，请重试')
  } finally {
    isProcessing.value = false
  }
}

// 续费会员
const renewMembership = async () => {
  isProcessing.value = true
  try {
    await userStore.renewMembership(selectedRenewPlan.value)
    showRenewModal.value = false
    alert('会员续费成功！')
  } catch (error) {
    alert('续费失败，请重试')
  } finally {
    isProcessing.value = false
  }
}
</script>

<style scoped>
.membership-container {
  padding: 20px;
}

.membership-header h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

/* 会员卡片 */
.membership-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.membership-card.vip-active {
  background: linear-gradient(135deg, #f0c987 0%, #e6a93d 100%);
  color: #333;
}

.membership-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: 600;
}

.membership-info h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.expire-date {
  font-size: 16px;
  opacity: 0.9;
}

.membership-actions {
  margin-top: 20px;
}

.upgrade-button,
.renew-button {
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upgrade-button {
  background: #ff6b6b;
  color: white;
}

.upgrade-button:hover {
  background: #ff5252;
  transform: translateY(-2px);
}

.renew-button {
  background: #4ecdc4;
  color: white;
}

.renew-button:hover {
  background: #45b7aa;
  transform: translateY(-2px);
}

/* 权益部分 */
.benefits-section h3,
.membership-levels h3,
.upgrade-stats h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.benefit-item {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.benefit-icon {
  font-size: 32px;
}

.benefit-info h4 {
  font-size: 16px;
  margin-bottom: 5px;
}

.benefit-info p {
  font-size: 14px;
  color: #666;
}

/* 会员等级 */
.levels-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.level-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.level-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.level-card.current {
  border-color: #ff6b6b;
  background: #fff5f5;
}

.level-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.level-card h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.level-card p {
  color: #666;
  margin-bottom: 15px;
  font-size: 14px;
}

.level-card ul {
  text-align: left;
  padding-left: 20px;
}

.level-card li {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

/* 升级统计 */
.stats-content {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  height: 20px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ecdc4 0%, #44a08d 100%);
  transition: width 0.3s ease;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  font-size: 20px;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #666;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: #f5f5f5;
  color: #333;
}

.modal-body {
  padding: 25px;
}

.current-status {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.membership-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.plan-card {
  border: 2px solid #eee;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.plan-card:hover {
  border-color: #4ecdc4;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.plan-card.selected {
  border-color: #4ecdc4;
  background: #f0fdfa;
}

.best-value {
  border-color: #ff6b6b;
}

.best-value-tag {
  position: absolute;
  top: -10px;
  right: 10px;
  background: #ff6b6b;
  color: white;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.plan-card h4 {
  margin-bottom: 10px;
  font-size: 16px;
}

.plan-price {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.save-tag {
  font-size: 12px;
  color: #ff6b6b;
  margin-left: 5px;
}

.select-plan {
  width: 100%;
  padding: 8px;
  border: 1px solid #4ecdc4;
  background: white;
  color: #4ecdc4;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.select-plan:hover:not(:disabled) {
  background: #4ecdc4;
  color: white;
}

.select-plan:disabled {
  background: #4ecdc4;
  color: white;
  cursor: not-allowed;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 25px;
  border-top: 1px solid #eee;
}

.cancel-button,
.confirm-button {
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-button {
  background: #f5f5f5;
  color: #666;
}

.cancel-button:hover {
  background: #e0e0e0;
}

.confirm-button {
  background: #4ecdc4;
  color: white;
}

.confirm-button:hover:not(:disabled) {
  background: #45b7aa;
}

.confirm-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .benefits-grid,
  .levels-container,
  .membership-plans {
    grid-template-columns: 1fr;
  }
  
  .membership-card {
    padding: 20px;
  }
  
  .membership-info h3 {
    font-size: 24px;
  }
}
</style>